<template>
	<div class="edit-popup">
		<popup ref="popupRef" :title="popupTitle" :async="true" width="550px" @confirm="handleSubmit"
			@close="handleClose">
			<el-form ref="formRef" :model="formData" label-width="120px" :rules="formRules" label-position="left">
				<div class="xl:flex">
					<div>
						<el-form-item label="等级名称" prop="name">
							<el-input v-model="formData.name" clearable placeholder="请输入等级名称" />
						</el-form-item>
						<el-form-item label="文字颜色" prop="text_color">
							<color-picker class="max-w-[400px]" v-model="formData.text_color" default-color="#4173ff" />
						</el-form-item>
						<el-form-item label="累积质押金额" prop="money">
							<el-input v-model="formData.money" type="number" clearable placeholder="请输入累积质押金额"
								:disabled="formData.id==1?true:false" />
						</el-form-item>
						<el-form-item label="1代推荐人数" prop="level1_num">
							<el-input v-model="formData.level1_num" type="number" clearable placeholder="请输入1代推荐人数"
								:disabled="formData.id==1?true:false" />
						</el-form-item>
						<!-- <el-form-item label="推荐人等级" prop="level1_vip_id">
							<el-select class="flex-1" v-model="formData.level1_vip_id" placeholder="请选择推荐人等级"
								:disabled="formData.id==1?true:false">
								<el-option v-for="item in vips.list" :key="item.id" :label="item.name"
									:value="item.id" />
							</el-select>
						</el-form-item> -->
						<el-form-item label="每日质押次数" prop="item_num">
							<el-input v-model="formData.item_num" type="number" clearable placeholder="请输入每日质押次数" />
						</el-form-item>
						<el-form-item label="质押加息率" prop="item_add_rate">
							<el-input v-model="formData.item_add_rate" type="number" clearable placeholder="请输入质押加息率" />
						</el-form-item>
						<el-form-item label="挖矿速度" prop="mine_speed">
							<el-input v-model="formData.mine_speed" type="number" clearable placeholder="请输入挖矿速度" />
							<div class="form-tips">单位：小时</div>
						</el-form-item>
						<!-- <el-form-item label="量化最低金额" prop="lh_min">
							<el-input v-model="formData.lh_min" type="number" clearable placeholder="请输入量化最低金额" />
						</el-form-item>
						<el-form-item label="量化最高金额" prop="lh_max">
							<el-input v-model="formData.lh_max" type="number" clearable placeholder="请输入量化最高金额" />
						</el-form-item>
						<el-form-item label="最低收益率" prop="rate_min">
							<el-input v-model="formData.rate_min" type="number" clearable placeholder="请输入最低收益率" />
						</el-form-item>
						<el-form-item label="最高收益率" prop="rate_max">
							<el-input v-model="formData.rate_max" type="number" clearable placeholder="请输入最高收益率" />
						</el-form-item>
						<el-form-item label="每日量化次数" prop="lh_num">
							<el-input v-model="formData.lh_num" type="number" clearable placeholder="请输入每日量化次数" />
						</el-form-item> -->
						<el-form-item label="LOGO" prop="logo">
							<material-picker v-model="formData.logo" />
							<div class="form-tips">推荐尺寸：110px*76px</div>
						</el-form-item>
						<el-form-item label="背景图" prop="bg_img">
							<material-picker v-model="formData.bg_img" />
							<div class="form-tips">尺寸：750px*280px</div>
						</el-form-item>
						<el-form-item label="显示状态" prop="is_show" v-if="formData.id!=1">
							<el-switch v-model="formData.is_show" :active-value="1" :inactive-value="0" />
						</el-form-item>
					</div>
				</div>
			</el-form>
		</popup>
	</div>
</template>

<script lang="ts" setup name="userMemberEdit">
	import type { FormInstance } from 'element-plus'
	import Popup from '@/components/popup/index.vue'
	import { apiUserMemberAdd, apiUserMemberEdit, apiUserMemberDetail, apiUserMemberAll } from '@/api/user_member'
	import feedback from '@/utils/feedback'
	import type { PropType } from 'vue'
	defineProps({
		dictData: {
			type: Object as PropType<Record<string, any[]>>,
			default: () => ({})
		}
	})
	const emit = defineEmits(['success', 'close'])
	const formRef = shallowRef<FormInstance>()
	const popupRef = shallowRef<InstanceType<typeof Popup>>()
	const mode = ref('add')


	// 弹窗标题
	const popupTitle = computed(() => {
		return mode.value == 'edit' ? '编辑会员等级' : '新增会员等级'
	})

	const vips = reactive({
		list: [],
	})

	// 表单数据
	const formData = reactive({
		id: '',
		name: '',
		bg_img: '',
		logo: '',
		text_color: '#4173ff',
		money: 0,
		level1_num: 0,
		level1_vip_id: 1,
		lh_min: '',
		lh_max: '',
		rate_min: 0,
		rate_max: 0,
		lh_num: 1,
		is_show: 1,
		item_num: 0,
		item_add_rate: 0,
		
		mine_speed: 0
		// langs:[]
	})


	// 表单验证
	const formRules = reactive<any>({
		name: [{
			required: true,
			message: '请输入等级名称',
			trigger: ['blur']
		}],
		bg_img: [{
			required: true,
			message: '请选择背景图',
			trigger: ['blur']
		}],
		logo: [{
			required: true,
			message: '请选择LOGO',
			trigger: ['blur']
		}],
		text_color: [{
			required: true,
			message: '请输入文字颜色',
			trigger: ['blur']
		}],
		money: [{
			required: true,
			message: '请输入累积质押金额',
			trigger: ['blur']
		}],
		level1_num: [{
			required: true,
			message: '请输入1代推荐人数',
			trigger: ['blur']
		}],
		// level1_vip_id: [{
		// 	required: true,
		// 	message: '请选择推荐人等级',
		// 	trigger: ['blur']
		// }],
		item_num: [{
			required: true,
			message: '请输入每日质押次数',
			trigger: ['blur']
		}],
		item_add_rate: [{
			required: true,
			message: '请输入质押加息率',
			trigger: ['blur']
		}],
		mine_speed: [{
			required: true,
			message: '请输入挖矿速度',
			trigger: ['blur']
		}],
		// lh_min: [{
		// 	required: true,
		// 	message: '请输入量化最低金额',
		// 	trigger: ['blur']
		// }],
		// lh_max: [{
		// 	required: true,
		// 	message: '请输入量化最高金额',
		// 	trigger: ['blur']
		// }],
		// rate_min: [{
		// 	required: true,
		// 	message: '请输入量化最低收益率',
		// 	trigger: ['blur']
		// }],
		// rate_max: [{
		// 	required: true,
		// 	message: '请输入量化最高收益率',
		// 	trigger: ['blur']
		// }],
		// lh_num: [{
		// 	required: true,
		// 	message: '请输入每日量化次数',
		// 	trigger: ['blur']
		// }],
		is_show: [{
			required: true,
			message: '请选择显示状态',
			trigger: ['blur']
		}],
	})


	// 获取详情
	const setFormData = async (data : Record<any, any>) => {
		for (const key in formData) {
			if (data[key] != null && data[key] != undefined) {
				//@ts-ignore
				formData[key] = data[key]
			}
		}
	}

	const getDetail = async (row : Record<string, any>) => {
		const data = await apiUserMemberDetail({
			id: row.id
		})
		setFormData(data)
	}


	// 提交按钮
	const handleSubmit = async () => {
		await formRef.value?.validate()

		const data = { ...formData, }
		mode.value == 'edit'
			? await apiUserMemberEdit(data)
			: await apiUserMemberAdd(data)
		popupRef.value?.close()
		emit('success')
	}

	//打开弹窗
	const open = (type = 'add') => {
		mode.value = type
		popupRef.value?.open()
	}

	// 关闭回调
	const handleClose = () => {
		emit('close')
	}

	const getData = async () => {
		const data = await apiUserMemberAll()
		vips.list = data;
	}

	defineExpose({
		open,
		setFormData,
		getDetail
	})
	getData()
</script>